<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="Replicated App Manager" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>TLS Warning | Admin Console</title>
    <link rel="stylesheet" href="/assets/output.css" />
    <link rel="stylesheet" href="/assets/tls-custom.css" />
    {{if .AppIcon }}
    <link rel="icon" type="image/png" href="{{ .AppIcon }}" />
    {{end}}
    <script>
      //defaults to chrome example
      var firefoxText =
        'On the next screen, click <span class="font-medium">Advanced…</span>, then click <span class="font-medium">Accept the Risk and Continue</span> to continue to the Admin Console.';
      var ieText =
        'On the next screen, click "Continue to this website" to continue to the Admin Console.';
      var safariText =
        'On the next screen, click <span class="font-medium">Show Details</span>, then click <span class="font-medium">visit this website</span> to continue to the Admin Console.';
      var chromeText =
        'On the next screen, click <span class="font-medium">Advanced</span>, then click <span class="font-medium">Proceed</span> to continue to the Admin Console.';
      var operaText =
        'On the next screen, click <span class="font-medium">Help me understand</span>, then click <span class="font-medium">Proceed</span> to continue to the Admin Console.';
      var edgeText =
        'On the next screen, click <span class="font-medium">Advanced</span>, then click <span class="font-medium">Continue</span> to continue to the Admin Console.';

      var browserPlainText = "Other";
      var browserBodyText = 'On the next screen, click through the warning to continue to the Admin Console.';
      if (typeof InstallTrigger !== "undefined") {
        browserPlainText = "Firefox";
        browserBodyText = firefoxText;
      } else if (
        /Chrome/.test(navigator.userAgent) &&
        !/Edg|OPR/.test(navigator.userAgent)
      ) {
        browserPlainText = "Chrome";
        browserBodyText = chromeText;
      } else if (
        /Safari/.test(navigator.userAgent) &&
        !/Chrome|Edg|OPR/.test(navigator.userAgent)
      ) {
        browserPlainText = "Safari";
        browserBodyText = safariText;
      } else if (/Edg/.test(navigator.userAgent)) {
        browserPlainText = "Edge";
        browserBodyText = edgeText;
      } else if (/OPR/.test(navigator.userAgent)) {
        browserPlainText = "Opera";
        browserBodyText = operaText;
      } else if (
        /*@cc_on!@*/ false ||
        !!document.documentMode
      ) {
        //grouping Edge + IE 6 - 11 in this one
        browserPlainText = "Internet Explorer";
        browserBodyText = ieText;
      } else {
        // Catch-all for any other browser
        browserPlainText = "Other";
        browserBodyText = otherText;
      }

      var rawLink = window.location.href
        .substring(window.location.protocol.length)
        .replace(/\/$/, "");
      var httpsLink = "https:" + rawLink;
      var opensslLink = rawLink.substring(2).replace("/insecure", "");
      var tlsManagementLink = "/tls";
    </script>
  </head>
  <body>
    <div class="flex !flex-col flex-1">
      <div class="NavBarWrapper">
        <div class="flex flex-auto h-[50px]">
          <div class="flex items-center flex-1 relative">
            <div class="HeaderLogo">
              {{if .AppIcon }}<span
                class="appIcon flex"
                style="background-image: url('{{ .AppIcon }}')"
              ></span
              >{{end}}
            </div>
          </div>
        </div>
      </div>

      <div class="min-h-full w-full flex flex-1">
        {{if .IsEmbeddedCluster }}
        <div class="bg-[#F9FBFC] min-400">
          <div class="py-8 pl-8 shadow-[0_1px_0_#c4c8ca]">
            <span class="text-lg font-semibold text-gray-[#323232]">
              Let's get you started!
            </span>
          </div>
          <div
            class="p-8 shadow-[0_1px_0_#c4c8ca] font-medium flex text-[#323232]"
          >
            <img src="/assets/images/check.svg" alt="check" />
            <span class="font-bold ml-2"> Secure the Admin Console </span>
          </div>
          {{if .IsMultiNodeEnabled }}
          <div
            class="p-8 shadow-[0_1px_0_#c4c8ca] font-medium flex text-[#9c9c9c9c]"
          >
            <img src="/assets/images/check.svg" alt="check" />
            <span class="font-normal ml-2">
              Configure the cluster
            </span>
          </div>
          {{end}}
          <div
            class="p-8 shadow-[0_1px_0_#c4c8ca] font-medium flex text-[#9c9c9c9c]"
          >
            <img src="/assets/images/check.svg" alt="check" />
            <span class="font-normal ml-2"> Configure {{.AppTitle}} </span>
          </div>
          <div
            class="p-8 shadow-[0_1px_0_#c4c8ca] font-medium flex text-[#9c9c9c9c]"
          >
            <img src="/assets/images/check.svg" alt="check" />
            <span class="font-normal ml-2">
              Validate the environment & deploy {{.AppTitle}}
            </span>
          </div>
        </div>
        {{end}}
        <div class="tlsContent--wrapper px-8">
          <p class="tls-header my-8">Secure the Admin Console</p>
          <hr />
          <div class="mt-8 p-8 bg-[#F9FBFC]">
            <div>
              <p class="tls-header-sub">
                We use a self-signed TLS certificate to secure communication
                with the Admin Console during setup. You'll see a warning about
                this in your browser, but it is secure.
              </p>
            </div>
            <div class="flex1 flex">
              <div class="flex-column flex1 left-block">
                <div>
                  <p class="tls-section-header">
                    <script>
                      if (browserPlainText !== "Other") {
                        document.write(browserPlainText);
                      }
                    </script>
                  </p>
                  <p class="tls-header-sub">
                    <script>
                      document.write(browserBodyText);
                    </script>
                  </p>
                </div>

                <div
                  class="flex-column right-block alignItems--center justifyContent--center"
                >
                  <script>
                    if (["Safari", "Chrome", "Firefox", "Internet Explorer"].includes(browserPlainText)) {
                      document.write(
                        '<img class="insecure-image m-auto" src="/assets/images/' +
                          browserPlainText.toLowerCase().replace(" ", "") +
                          '-insecure.png" />',
                      );
                    }
                  </script>
                </div>
                <div class="flex gap-2 cursor mb-4" id="verify-link">
                  <p class="text-muted">
                    Verify the certificate's authenticity (optional)
                  </p>
                  <img
                    src="/assets/images/down_arrow.svg"
                    alt="check"
                    width="10"
                    id="down-arrow"
                  />
                  <img
                    src="/assets/images/up_arrow.svg"
                    alt="check"
                    width="10"
                    id="up-arrow"
                    style="display: none"
                  />
                </div>
                <div
                  id="verification-container"
                  className="cursor "
                  style="display: none"
                >
                  <div class="flex flex-column">
                    <div class="CodeSnippet">
                      <div class="CodeSnippet-content">
                        <p>
                          Run this command on the host to calculate the
                          certificate's fingerprint.
                        </p>
                        <pre>
                        <code id="verify-snippet">
                        </code>
                      </pre>
                        <div class="copy-command">
                          <a id="copy-command" class="replicated-link"
                            >Copy command</a
                          >
                        </div>
                      </div>
                    </div>
                    <div class="CodeSnippet">
                      <div class="CodeSnippet-content">
                        <p>Expected fingerprint</p>
                        <pre>
                        <code>{{ .fingerprintSHA1 }}</code>
                      </pre>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="button-wrapper flex justifyContent--end">
                  <button
                    type="submit"
                    class="btn primary"
                    onclick="location.href=tlsManagementLink;"
                  >
                    Continue
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    document.getElementById("verify-snippet").innerHTML =
      "echo | openssl s_client -servername local -connect " +
      opensslLink +
      " 2>/dev/null | openssl x509 -noout -fingerprint";
  </script>
  <script>
    const replicatedLink = document.getElementById("verify-link");

    const verificationContainer = document.getElementById(
      "verification-container"
    );

    replicatedLink.addEventListener("click", () => {
      if (verificationContainer.style.display === "block") {
        verificationContainer.style.display = "none";
        document.getElementById("down-arrow").style.display = "none";
        document.getElementById("up-arrow").style.display = "block";
      } else {
        verificationContainer.style.display = "block";
        document.getElementById("down-arrow").style.display = "block";
        document.getElementById("up-arrow").style.display = "none";
      }
    });

    function copy() {
      const copyText = document.querySelector("#verify-snippet").textContent;

      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard
          .writeText(copyText)
          .then(() => {
            showCopySuccess();
          })
          .catch((err) => {
            // Fallback to the textarea method if Clipboard API fails
            fallbackCopy(copyText);
          });
      } else {
        // Directly use the textarea method for older browsers or unsupported environments
        fallbackCopy(copyText);
      }
    }

    function fallbackCopy(text) {
      const textArea = document.createElement("textarea");
      textArea.value = text;
      document.body.appendChild(textArea);
      textArea.select();

      try {
        document.execCommand("copy");
        showCopySuccess();
      } catch (err) {
        console.error("Failed to copy:", err);
        showCopyError();
      } finally {
        document.body.removeChild(textArea);
      }
    }

    document.getElementById("copy-command").addEventListener("click", copy);

    function showCopySuccess() {
      const copyCommandElement = document.getElementById("copy-command");
      const originalText = copyCommandElement.textContent;
      copyCommandElement.textContent = "Copied!";
      setTimeout(() => {
        copyCommandElement.textContent = originalText;
      }, 3000);
    }
    function showCopyError() {
      const copyCommandElement = document.getElementById("copy-command");
      const originalText = copyCommandElement.textContent;
      copyCommandElement.textContent = "There was an error, please try again.";
      setTimeout(() => {
        copyCommandElement.textContent = originalText;
      }, 3000);
    }
  </script>
</html>
